<!doctype html>

<html lang="zh">

    <head>
        <title>单选按钮和复选框的美化（只用css）</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="UTF-8" />
        <style>
            /*CSS源代码*/

            body {
                font: menu;
                font-size: 16px;
            }

            .con {
                width: 1000px;
                margin: 0 auto;
            }

            .con h1 {
                text-align: center;
            }

            h1,
            h2 {
                font-weight: normal;
                color: #0CC;
            }

            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            em {
                font-style: normal;
            }
            /*复选*/

            .check_box {
                display: inline-block;
                position: relative;
            }

            .check_box label {
                width: 16px;
                height: 16px;
                position: absolute;
                top: 0;
                left: 0;
                /*border: 2px solid #f78642;*/
                border-radius: 5px;
                background: #fff;
                cursor: pointer;
                box-shadow: 1px 0 10px #293E99;
                background-color: #fff;
            }

            .check_box label:hover {
                /*border: 2px solid #f78642;*/
            }

            .check_box label:after {
                /*content: '';
                width: 8px;
                height: 4px;
                position: absolute;
                top: 4px;
                left: 3px;
                border: 2px solid #cacaca;
                border-top: none;
                border-right: none;
                opacity: 0.4;
                transform: rotate(-45deg);*/
                /*-webkit-transform:rotate(-45deg);*/
            }

            .check_box label:hover:after {
                /*border: 2px solid #f78642;
                border-top: none;
                border-right: none;*/
            }

            .check_box input:checked+ label {
                /*border: 2px solid #f78642;*/
            }

            .check_box input:checked+ label:after {
                content: '';
                width: 8px;
                height: 4px;
                position: absolute;
                top: 4px;
                left: 3px;
                border: 2px solid #293E99;
                border-top: none;
                border-right: none;
                opacity: 0.4;
                transform: rotate(-45deg);
                
                opacity: 1;
                /*border: 2px solid #f78642;*/
                border-top: none;
                border-right: none;
            }

            .check_box em {
                /*margin: 0 0 0 5px;*/
            }
            /*单选*/

            .radio_box {
                display: none;
            }

            .radio_box+label {
                width: 15px;
                height: 15px;
                border: 2px solid #ef4949;
                border-radius: 50%;
                background: #fff;
                cursor: pointer;
                display:inline-block;
                position: relative;
            }

            .radio_box:checked+ label:after {
                content: '';
                width: 9px;
                height: 9px;
                position: absolute;
                top: 3px;
                left: 3px;
                background: #ef4949;
                border-radius: 50%;
            }

            .check_box em {
                margin: 0 0 0 5px;
            }
        </style>

    </head>

    <body>

        <div class="con">
            <h1>单选框复选框的美化</h1>
            <h2>复选框:</h2>
            <span class="check_box">
                <input type="checkbox" id="check_1">
                <label for="check_1"></label>
                <em>选项1</em>
           </span>
            <br><br>
            <span class="check_box">
                <input type="checkbox" id="check_2">
                <label for="check_2"></label>
                <em>选项2</em>
           </span>
            <br><br>
            <span class="check_box">
                <input type="checkbox" id="check_3">
                <label for="check_3"></label>
                <em>选项3</em>
           </span>
            <br><br>
            <h2>单选框:</h2>
            <label>
                <input class="radio_box" type="radio" id="radio_1" name="radio" checked>
                <label for="radio_1"></label>
                <em>选项1</em>
           </label>
            <br><br>
            <label>
                <input class="radio_box" type="radio" id="radio_2" name="radio">
                <label for="radio_2"></label>
                <em>选项2</em>
           </label>
        </div>

    </body>

</html>